<template>
<div>
  <div>
    <Input v-model="form.searchValue" placeholder="关键词" style="width: 300px" clearable />
    &nbsp;&nbsp;&nbsp;
    <Input v-model="form.hscode" placeholder="HScode" style="width: 300px" clearable />
    &nbsp;&nbsp;&nbsp;
    <Button type="primary" @click="handleSearch">搜索</Button>
  </div>
  <br>
  <Table :columns="hscodeColumns" :data="data">
    <template slot-scope="{ row, index }" slot="category">
      <Table :columns="hscodeCategoryColumns" :data="row.categories">
        <template slot-scope="{ rowCategory }" slot="categoryName">
          {{rowCategory}}
        </template>
      </Table>
    </template>
    <template slot-scope="{ row, index }" slot="action">
      <Button type="primary" size="small" style="margin-right: 5px" @click="select(row)">选择</Button>
    </template>
  </Table>
  <Row type="flex" justify="end" class="mt_10">
    <Page
      :current="searchForm.pageNumber"
      :total="total"
      :page-size="searchForm.pageSize"
      @on-change="changePage"
    />
  </Row>
</div>
</template>

<script>
import {hscodeSearchApi} from "../../../../api/thirdParty/hscodeSearch";
import {isEmpty, isNumber} from "../../../../utils/util";

export default {
  name: "HscodeList",
  props: {
    countryCode: {
      type: String,
      default: () => 'USA',
    }
  },
  data () {
    return {
      form: {
        searchValue: '',
        hscode: ''
      },
      searchForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "create_time", // 默认排序字段
        order: "desc", // 默认排序方式
      },
      data: [],
      total: 0,
      hscodeColumns: [
        {
          title: '名称',
          key: 'goodsDescription'
        },
        {
          title: 'HScode',
          width: 120,
          key: 'hscode'
        },
        {
          title: '所属章节',
          width: 500,
          slot: 'category',
          key: 'category'
        },
        {
          title: '操作',
          slot: 'action',
          width: 80,
          align: 'center'
        }
      ],
      hscodeCategoryColumns: [
        {
          title: ' ',
          width: 100,
          key: 'hscode'
        },
        {
          title: '描述',
          key: 'categoryName'
        },
      ],
    }
  },
  created() {
  },
  methods: {
    // 搜索
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.listByPage();
    },
    /**
     * 分页查询
     */
    listByPage() {
      let searchValue = this.form.searchValue
      // 如果searchValue为空，那么就将HScode复制给searchValue
      if (isEmpty(this.form.searchValue)) {
        searchValue = this.form.hscode
      }
      const params = {
        pageSize: this.searchForm.pageSize,
        pageNum: this.searchForm.pageNumber,
        countryCode: this.countryCode,
        hscode: this.form.hscode,
        searchValue
      }
      this.data = []
      // 调用接口
      hscodeSearchApi.openSearch.listByPageMore(params).then(res => {
        const records = res.data.records
        if (records !== null && records.length > 0) {
          this.getCategories(records)
        }
        this.total = res.data.total
      })
    },
    /**
     * 选择当前行
     */
    select (row) {
      // 调用父组件方法
      this.$emit('handleSelectSubmit', row.hscode);
    },
    /**
     * 获取类目
     */
    getCategories(records) {
      if (isEmpty(records)) {
        return
      }
      let hscodeList = ''
      records.map(item => item.hscodeBaseInfoVo.hscode).forEach(item => {
        hscodeList += item + ','
      })
      const data = {
        hscodeList,
        countryCode: this.countryCode
      }
      // 调用接口
      hscodeSearchApi.openCategory.listHscodeParentCategories(data).then(res => {
        res.data.forEach(item => {
          const categories = []
          // 处理类目
          this.handleCategory([item], categories)
          // 设置
          const temps = records.filter(temp => temp.hscodeBaseInfoVo.hscode === item.currentHscode)
          if (!isEmpty(temps)) {
            temps[0].categories = categories
          }
        })
        records.forEach(item => {
           const obj = {
             goodsDescription: item.hscodeBaseInfoVo.goodsDescription,
             hscode: item.hscodeBaseInfoVo.hscode,
             categories: item.categories
           }
           this.data.push(obj)
       })
      })
    },
    /**
     * 处理类目
     */
    handleCategory(categoryInfoTreeVos, categories) {
      if (isEmpty(categoryInfoTreeVos)) {
        return
      }
      if (categoryInfoTreeVos[0]) {
        const temp = categoryInfoTreeVos[0]
        // 只获取4位数以上，八位数以下的HScode
        if (isNumber(temp.hscode) && temp.hscode.length >= 4) {
          categories.push({
            hscode: temp.hscode,
            categoryName: temp.categoryName
          })
        }
        if (temp.children) {
          this.handleCategory(temp.children, categories)
        }
      }
    },
    // 改变页码
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.listByPage();
    },
  }
}
</script>

<style scoped lang="scss">
.mt_10 {
  margin-top: 10px;
}
</style>
